<template>
  <div>
    <div v-if="power===3">
      <h1>Work</h1>
      <!--搜索框-->
      <el-form :inline="true" ref="form" :model="queryLike" label-width="80px">
        <el-form-item label="任务发布者id">
          <el-input v-model="queryLike.id" placeholder="输入要查找的任务发布者id"></el-input>
        </el-form-item>
        <el-form-item label="任务执行者id">
          <el-input v-model="queryLike.worker" placeholder="输入要查找的任务执行者id"></el-input>
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input v-model="queryLike.name" placeholder="输入要查找的任务名称"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="任务介绍">
          <el-input v-model="queryLike.context" placeholder="输入要查找的任务介绍"></el-input>
        </el-form-item>
        <el-form-item label="状态码">
          <el-radio-group v-model="queryLike.state">
            <el-radio :label="1">正常工作中</el-radio>
            <el-radio :label="0">封禁</el-radio>
            <el-radio :label="3">完成</el-radio>
            <el-radio :label="2">提交中</el-radio>
            <el-radio :label="4">转发中</el-radio>
            <el-radio :label="-1">所有</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择开始日期" v-model="queryLike.startTime1"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择开始时间" v-model="queryLike.startTime2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择结束日期" v-model="queryLike.endTime1"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择结束时间" v-model="queryLike.endTime2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <br>
        <el-form-item label="排序类型">
          <el-radio-group v-model="queryLike.sortType">
            <el-radio :label="1">降序</el-radio>
            <el-radio :label="0">升序</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序依据">
          <el-radio-group v-model="queryLike.sortBy">
            <el-radio :label="10">创建时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="页数">
          <el-input v-model="queryLike.page" width="20" placeholder="输入当前页"></el-input>
        </el-form-item>
        <el-form-item label="页内条数">
          <el-input v-model="queryLike.pageSize" width="20" placeholder="输入单页总条数"></el-input>
        </el-form-item>
        <el-form-item>
          <!--查询按钮-->
          <el-button type="primary" @click="search(queryLike)" icon="el-icon-search" value="查询"></el-button>
          <!--添加按钮-->
          <el-button style="float:right" type="success" icon="el-icon-circle-plus-outline" @click="insert()"
                     value="添加"></el-button>
        </el-form-item>
      </el-form>
      <!--添加填出的对话框(和修改是同一个)-->
      <el-dialog title="任务" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
          <el-form-item label="任务发布者id" :label-width="formLabelWidth">
            <el-input v-model="pojo.id.id" autocomplete="on"></el-input>
          </el-form-item>
          <el-form-item label="任务执行者id" :label-width="formLabelWidth">
            <el-input v-if="pojo.worker!==null&&pojo.worker!==undefined" v-model="pojo.worker.id" autocomplete="on"></el-input>
          </el-form-item>
          <el-form-item label="任务名称" :label-width="formLabelWidth">
            <el-input v-model="pojo.name" autocomplete="on"></el-input>
          </el-form-item>
          <el-form-item label="任务内容" :label-width="formLabelWidth">
            <div>
              <el-card style="height: 610px;">
                <!--富文本-->
                <quill-editor v-model="pojo.context" ref="myQuillEditor" style="height: 500px;" :options="editorOption"
                              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                              @change="onEditorChange($event)"
                >
                  <!-- 自定义toolar -->
                  <div id="toolbar" slot="toolbar">
                    <!-- Add a bold button -->
                    <button class="ql-bold" title="加粗">Bold</button>
                    <button class="ql-italic" title="斜体">Italic</button>
                    <button class="ql-underline" title="下划线">underline</button>
                    <button class="ql-strike" title="删除线">strike</button>
                    <button class="ql-blockquote" title="引用"></button>
                    <button class="ql-code-block" title="代码"></button>
                    <button class="ql-header" value="1" title="标题1"></button>
                    <button class="ql-header" value="2" title="标题2"></button>
                    <!--Add list -->
                    <button class="ql-list" value="ordered" title="有序列表"></button>
                    <button class="ql-list" value="bullet" title="无序列表"></button>
                    <!-- Add font size dropdown -->
                    <select class="ql-header" title="段落格式">
                      <option selected>段落</option>
                      <option value="1">标题1</option>
                      <option value="2">标题2</option>
                      <option value="3">标题3</option>
                      <option value="4">标题4</option>
                      <option value="5">标题5</option>
                      <option value="6">标题6</option>
                    </select>
                    <select class="ql-size" title="字体大小">
                      <option value="10px">10px</option>
                      <option value="12px">12px</option>
                      <option value="14px">14px</option>
                      <option value="16px" selected>16px</option>
                      <option value="18px">18px</option>
                      <option value="20px">20px</option>
                      <option value="20px">22px</option>
                      <option value="20px">24px</option>
                      <option value="20px">26px</option>
                      <option value="20px">28px</option>
                      <option value="20px">30px</option>
                    </select>
                    <select class="ql-font" title="字体">
                      <option value="SimSun">宋体</option>
                      <option value="SimHei">黑体</option>
                      <option value="Microsoft-YaHei">微软雅黑</option>
                      <option value="KaiTi">楷体</option>
                      <option value="FangSong">仿宋</option>
                      <option value="Arial">Arial</option>
                    </select>
                    <!-- Add subscript and superscript buttons -->
                    <select class="ql-color" value="color" title="字体颜色"></select>
                    <select class="ql-background" value="background" title="背景颜色"></select>
                    <select class="ql-align" value="align" title="对齐"></select>
                    <button class="ql-clean" title="还原"></button>
                    <!-- You can also add your own -->
                    <button class="ql-link" title="链接"></button>
                    <button class="ql-image" title="图片"></button>
                    <button class="ql-video" title="视频"></button>
                  </div>
                </quill-editor>
              </el-card>
            </div>
          </el-form-item>
          <el-divider>任务历史状态</el-divider>
          <!--添加按钮-->
          <el-button style="float:left" type="success" icon="el-icon-circle-plus" @click="saveSalegoods(pojo.wid)"
                     value="添加"></el-button>
          <br><br><br>
          <!--套餐-->
          <div v-for="item in pojo.l">
            <el-form :model="item">
              <el-form-item label="取消" :label-width="formLabelWidth2">
                <!--取消按钮-->
                <el-button style="float:right" type="error" icon="el-icon-remove" @click="deleteSalegoods(item)"
                           value="减少"></el-button>
              </el-form-item>
              <el-form-item label="标签" :label-width="formLabelWidth2">
                <el-input v-model="item.title" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="转发者id" :label-width="formLabelWidth2">
                <el-input v-if="item.belong!==null&&item.belong!==undefined" v-model="item.belong.id"
                          autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="接收者id" :label-width="formLabelWidth2">
                <el-input v-if="item.to!==null&&item.to!==undefined" v-model="item.to.id" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="状态码" :label-width="formLabelWidth2">
                <el-input v-model="item.state" autocomplete="on"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save(pojo)">确 定</el-button>
        </div>
      </el-dialog>
      <!--内容对话框-->
      <el-dialog
        title="全文"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <p v-html="this.content"></p>
      </el-dialog>
      <!--套餐对话框-->
      <el-dialog
        title="任务历史状态"
        :visible.sync="packageDialogVisible"
        width="75%"
        center>
        <el-table :data="packageList.l" style="width: 100%" max-height="500px">
          <el-table-column fixed property="wsid" label="主键"></el-table-column>
          <el-table-column property="wid" label="任务id"></el-table-column>
          <el-table-column property="title" label="标签"></el-table-column>
          <el-table-column property="belong.id" label="转发者id"></el-table-column>
          <el-table-column property="belong.name" label="转发者名字"></el-table-column>
          <el-table-column property="to.id" label="接收者id"></el-table-column>
          <el-table-column property="to.name" label="接收者名字"></el-table-column>
          <el-table-column property="creattime" label="创建时间" width="150"></el-table-column>
          <el-table-column property="state" label="状态码"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button v-if="power===3" type="danger" icon="el-icon-delete" value="删除"
                         @click="phydele2(scope.row,packageList,scope.row.wsid)"
                         circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--列表-->
      <el-table :data="user" style="width: 100%" max-height="600">
        <el-table-column fixed property="wid" label="主键"></el-table-column>
        <el-table-column property="id.id" label="任务创建者id"></el-table-column>
        <el-table-column property="id.name" label="任务创建者"></el-table-column>
        <el-table-column property="worker.id" label="任务执行者id"></el-table-column>
        <el-table-column property="worker.name" label="任务执行者"></el-table-column>
        <el-table-column property="name" label="任务名称"></el-table-column>
        <el-table-column property="context" label="任务内容">
          <template slot-scope="scope">
            <p v-html="scope.row.context" class="product-buyer-name"></p>
            <el-button type="text" @click="Content(scope.row.context)">查看完整内容</el-button>
          </template>
        </el-table-column>
        <el-table-column property="creattime" label="创建时间" width="150"></el-table-column>
        <el-table-column
          fixed="left"
          label="套餐">
          <template slot-scope="scope">
            <el-button type="text" @click="packageOn(scope.row)">点击查看套餐</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-setting" value="修改" @click="change(scope.row)" circle></el-button>
            <el-button v-if="power===3" type="danger" icon="el-icon-delete" value="删除"
                       @click="phydele(scope.row)"
                       circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="power!==3">
      <h1>权限不够,不予开放</h1>
    </div>
  </div>
</template>

<script>
import {
  Quill,
  quillEditor
} from 'vue-quill-editor'
import '../../../src/assets/css/font.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px']
Quill.register(Size, true)

// 自定义字体类型
let fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  '宋体', '黑体'
]
let Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  name: "Work",
  props: {},
  components: {quillEditor},
  data() {
    return {
      /**
       * @富文本默认内容
       * */
      editorOption: {
        placeholder: "请输入",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      },
      /**
       * @套餐
       * */
      packageList: "",
      /**
       * @套餐展示
       * */
      packageDialogVisible: false,
      /**
       * @介绍内文
       * */
      content: "",
      /**
       * @展示内容
       * */
      centerDialogVisible: false,
      /***
       * @修改和添加数据类型
       * */
      pojo: this.$store.state.Pojo.WorkVo,
      /**
       * @弹出的对话框,用于修改和添加数据
       * */
      dialogFormVisible: false,
      /**
       * @对话框内条目的统一长度
       * */
      formLabelWidth: '120px',
      /**
       * @子对话框内条目统一长度
       * */
      formLabelWidth2: '100px',
      /**
       * @表单数据
       * */
      user: this.$store.state.List.WorkVo,
      /**
       * @权限,页面显示不同权限的操作
       * */
      power: this.$store.state.operator.power,
      /**
       * @查询条件
       * */
      queryLike: {
        OperatorId: "",
        startTime1: "2000-01-01 00:00:00.000+0000",
        startTime2: "2000-01-01 00:00:00.000+0000",
        endTime1: "2099-01-01 00:00:00.000+0000",
        endTime2: "2099-01-01 00:00:00.000+0000",
        id: "",
        worker: "",
        page: 1,
        pageSize: 10,
        sortBy: 10,
        sortType: 1,
        name: "",
        context: "",
        state: -1,
      },
      /**
       * @后端controller名字
       * */
      controller: 'Work',
    };
  },
  computed: {
    baseURL() {
      return this.$store.state.baseURL;
    },
  },
  /**
   * @加载数据
   */
  created() {
    this.LoadMsg();
  },
  /**
   * @static方法
   * */
  mounted() {
    (() => {
      /*console.log(this.$store.state.operator)
      this.power=this.$store.state.operator["power"];
      console.log(this.power);
      console.log(typeof (this.power))*/
    })();
  },
  methods: {
    /**
     * @失去焦点事件
     * */
    onEditorBlur() {
    },
    /**
     * @获得焦点事件
     * */
    onEditorFocus() {
    },
    /**
     * @内容改变事件
     * */
    onEditorChange() {
    },
    /**
     * @减少指定序列套餐
     * */
    deleteSalegoods2(val, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i] === val) {
          list.splice(i, 1);
          break;
        }
      }
    },
    /**
     * @减少套餐
     * */
    deleteSalegoods(val) {
      for (let i = 0; i < this.pojo.l.length; i++) {
        if (this.pojo.l[i] === val) {
          this.pojo.l.splice(i, 1);
          break;
        }
      }
    },
    /**
     * @增加套餐
     * */
    saveSalegoods(wid) {
      let val = this.$helper.clone(this.$store.state.Pojo.WorkstateVo);
      val.wsid = "";
      val.wid = wid;
      val.state = "";
      val.title = "";
      val.belong.id = "";
      val.to.id = "";
      val.creattime = this.$helper.renderTime(new Date());
      this.pojo.l.push(val);
    },
    /**
     * @套餐嵌入内容
     * */
    packageOn(val) {
      this.packageDialogVisible = true;
      this.packageList = val;
    },
    /**
     * @嵌入内容
     * */
    Content(val) {
      this.centerDialogVisible = true;
      this.content = val;
    },
    /**
     * @添加
     * */
    insert() {
      this.pojo.wid = "";
      this.pojo.id.id = "";
      if(this.pojo.worker===null||this.pojo.worker===undefined){
        this.pojo.worker={
          id:""
        }
      }else{
        this.pojo.worker.id = "";
      }
      this.pojo.name = "";
      this.pojo.context = "";
      this.dialogFormVisible = true;
      this.pojo.l = [];
      this.saveSalegoods(this.pojo.wid);
    },
    /**
     * @修改
     * */
    change(val) {
      //console.log(val)
      this.pojo = this.$helper.clone(val);
      if(this.pojo.worker===null||this.pojo.worker===undefined){
        this.pojo.worker={
          id:""
        }
      }else{
        this.pojo.worker.id = "";
      }
      for (let i = 0; i < this.pojo.l.length; i++) {
        if(this.pojo.l[i].belong===null||this.pojo.l[i].belong===undefined){
          this.pojo.l[i].belong={
            id:''
          };
        }else {
          this.pojo.l[i].belong.id = "";
        }
        if(this.pojo.l[i].to===null||this.pojo.l[i].to===undefined){
          this.pojo.l[i].to={
            id:''
          };
        }else {
          this.pojo.l[i].to.id = "";
        }
      }
      this.dialogFormVisible = true;
    },
    /**
     * @保存
     */
    save(val) {
      let _this = this;
      console.log(val)
      this.axios.post(this.$store.state.baseURL + 'client/' + this.controller + '/save?' + 'OperatorId=' + this.$store.state.operator.id,
        {
          wid: val.wid,
          id: val.id,
          worker: val.worker,
          name: val.name,
          context: val.context,
          l: val.l
        })
        .then(res => {
          //console.log(res.data)
          _this.search(_this.queryLike);
        })
      this.dialogFormVisible = false;
    },
    /**
     * @物理删除
     */
    phydele(val) {
      let _this = this;
      //this.dataPreprocessingT(val);
      this.axios.delete(this.$store.state.baseURL + 'client/' + this.controller + '/delete?' + 'OperatorId=' + this.$store.state.operator.id + '&id=' + val.wid)
        .then(res => {
          _this.search(_this.queryLike);
        })
    },
    /**
     * @物理删除套餐
     */
    phydele2(pojo, val, id) {
      let _this = this;
      //console.log(pojo);
      this.deleteSalegoods2(pojo, val.l);
      //console.log(val.list);
      //this.dataPreprocessingT(val);
      this.axios.delete(this.$store.state.baseURL + 'client/' + "Workstate" + '/delete?' + 'OperatorId=' + this.$store.state.operator.id + '&id=' + id)
        .then(res => {
          _this.search(_this.queryLike);
        })
    },
    /**
     * @查询
     * */
    search(val) {
      let _this = this;
      //console.log(val);
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?'
        + 'OperatorId=' + this.$store.state.operator.id
        + '&id=' + val.id
        + '&worker=' + val.worker
        + '&name=' + val.name
        + '&context=' + val.context
        + '&state=' + val.state
        + '&sortBy=' + val.sortBy
        + '&sortType=' + val.sortType
        + '&page=' + val.page
        + '&pageSize=' + val.pageSize
        + '&startTime=' + this.$helper.renderTime(val.startTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.startTime2).split(' ')[1]
        + '&endTime=' + this.$helper.renderTime(val.endTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.endTime2).split(' ')[1]
      )
        .then(res => {
          _this.$store.state.List.WorkstateVo = res.data;
          _this.LoadInfo(res.data);
          //console.log(_this.user);
        })
    },
    /**
     *
     * @导入具体列表的数据
     */
    LoadMsg() {
      let _this = this;
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?' + 'OperatorId=' + this.$store.state.operator.id + '&state=-1')
        .then(res => {
          _this.$store.state.List.WorkVo = res.data;
          _this.LoadInfo(res.data);
          //console.log(res.data);
        })
    },
    /**
     *
     * @更新当前页面的数据(data<->this.$store.state)
     */
    LoadInfo(val) {
      this.user = val;
    },
  },
}
</script>

<style scoped>
.line-limit-length {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /*文本不换行，这样超出一行的部分被截取，显示...*/
}

.product-buyer-name {
  max-width: 180px;
  max-height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
